<template>
  <n-card :bordered="false" class="proCard">
    <div class="mb-4">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" inline="true">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <div class="export-btn-container">
        <n-button type="primary" @click="handleExport">导出数据</n-button>
      </div>
    </div>

    <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="actionRef"
      :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :scroll-x="1090">
      <template #toolbar>
          <h1 class="flex items-center">
            <span>总价：<span class="text-red-600 font-bold text-xl">{{ allTotal }}</span></span>
            <span class="mx-6"></span>
            <span>总磅费：<span class="text-red-600 font-bold text-xl">{{ allWeightFee }}</span></span>
          </h1>
          <!-- <n-button type="primary" @click="reloadTable">刷新数据</n-button> -->
        </template>
    </BasicTable>

    <n-modal  :show-icon="false" preset="dialog"  style="width: 1000px">
      <OrderDetail  />
      <OrderItem  />
      <!-- <OrderShipment v-if="checkedOrder.orderStatus == OrderStatusEnum.PAID_OFF" :orderId="checkedOrder.id"
        :order="checkedOrder" @update:shipment="handleShipment" /> -->
      <template #action>
        <n-space>
          <n-button >关闭</n-button>
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>


<script lang="ts" setup>
import { h, reactive, ref, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { getWeightPage, exportExcel } from '@/api/weight/weight';
import { getGoodsType, getWeightNumber } from '@/api/weight/goodsType';
import { columns } from './columns';
import { downloadByUrl } from '@/utils/downloadFile';

const schemas = ref<FormSchema[]>([
  {
    field: 'time',
    component: 'NDatePicker',
    label: '称重时间',
    componentProps: {
      type: 'daterange',
      format: 'yyyy-MM-dd', // 显示格式为仅日期
      valueFormat: 'yyyy-MM-dd', // 值格式为仅日期
    },
    rules: [{ required: false }],
    //defaultValue: getTodayRange(), // 默认值设置为当天的日期范围
  },
  { 
    field: 'goodsType',
    component: 'NSelect',
    label: '货物类型',
    componentProps: {
      options: [], // 初始为空
      placeholder: '请选择货物',
      filterable: true,
    },
    rules: [{ required: false }],
  },
  {
    field: 'employmentName',
    component: 'NInput',
    label: '操作员名称',
    rules: [{ required: false }],
  },
  {
    field: 'weightNumber',
    component: 'NSelect',
    label: '地磅编号',
    componentProps: {
      options: [], // 初始为空
      placeholder: '请选择地磅',
      filterable: true,
    },
    rules: [{ required: false, message: '请选择地磅编号', trigger: 'change' }],
  },
   // 是否除皮筛选
  {
    field: 'tare',
    component: 'NSelect',
    label: '是否除皮',
    componentProps: {
      options: [
        { label: '未除皮', value: '0' },
        { label: '已除皮', value: '1' }
      ], // 固定的枚举选项
      placeholder: '是否除皮',
    },
    rules: [{ required: false, message: '是否除皮', trigger: 'change' }],
  },
  // 是否结算筛选
  {
    field: 'settlement',
    component: 'NSelect',
    label: '是否结算',
    componentProps: {
      options: [
        { label: '未结算', value: '0' },
        { label: '已结算', value: '1' }
      ], // 固定的枚举选项
      placeholder: '是否结算',
    },
    rules: [{ required: false, message: '是否结算', trigger: 'change' }],
  },
])



const message = useMessage();
// 确保actionRef正确初始化，设置为BasicTable实例的类型
const actionRef = ref<InstanceType<typeof BasicTable>>();
const allTotal = ref(0); // 总价响应式变量
const allWeightFee = ref(0); // 总磅费响应式变量

// 初始化params为响应式对象，用于存储表单查询参数
const params = ref<Recordable>({});

// 获取今天的日期范围（仅日期部分，不包含时间）
const getTodayRange = () => {
  const today = new Date();
  // 设置开始日期为今天（不包含具体时间）
  const startDate = new Date(today);
  startDate.setHours(0, 0, 0, 0);
  
  // 设置结束日期为今天（不包含具体时间）
  const endDate = new Date(today);
  endDate.setHours(0, 0, 0, 0);
  
  return [startDate, endDate];
};

const [register, { setProps, setFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:2 xl:6 2xl:3' },
  labelWidth: 100,
  schemas,
  showAdvancedButton: false, // 隐藏展开/收起按钮
});

// 处理时间范围参数并整合所有查询条件
const loadDataTable = async (res) => {
  try {
    // 深拷贝参数，避免直接修改原数据
    const requestParams = { ...params.value, ...res };
    
    // 特殊处理日期范围参数
    if (requestParams.time && Array.isArray(requestParams.time) && requestParams.time.length === 2) {
      // 提取开始日期和结束日期
      const [startDate, endDate] = requestParams.time;
      
      // 确保只使用日期部分
      if (startDate && endDate) {
        // 转换为日期对象确保只包含日期部分
        const startDateObj = new Date(startDate);
        const originalStartHours = startDateObj.getHours();
        startDateObj.setHours(0, 0, 0, 0);
        
        const endDateObj = new Date(endDate);
        const originalEndHours = endDateObj.getHours();
        endDateObj.setHours(0, 0, 0, 0);
        // 转换为时间戳格式
        requestParams.startTime = startDateObj.getTime();
        requestParams.endTime = endDateObj.getTime();
      } else {
        console.log('[loadDataTable] 日期范围不完整，跳过设置时间参数');
      }
      
      // 移除原始的time字段
      delete requestParams.time;
    } else {
      console.log('[loadDataTable] 没有检测到有效的日期范围参数:', requestParams.time);
    }
    console.log('[loadDataTable] 最终请求参数:', requestParams);
    // 调用API接口并返回结果
    const result = await getWeightPage(requestParams);
    
    // 从API返回结果中提取总价和总磅费
    if (result) {
      allTotal.value = result.allTotal || 0;
      allWeightFee.value = result.allWeightFee || 0;
    }
    
    return result;
  } catch (error) {
    console.error('[loadDataTable] 加载列表数据异常:', error);
    message.error('加载数据失败，请稍后重试');
    return { list: [], total: 0 }; // 返回空数据避免表格显示错误
  }
};

function onCheckedRow(rowKeys) {
  console.log(rowKeys);
}



// 提交表单查询
function handleSubmit(values: Recordable) {
  // 存储表单值用于后续查询
  params.value = { ...values }; // 深拷贝避免引用问题
  // 重新加载表格数据
  reloadTable();
}

function reloadTable() {
  if (actionRef.value) {
    actionRef.value.reload();
  } else {
    console.error('actionRef未正确初始化');
  }
}

function handleReset(values: Recordable) {
  console.log(values);
}

// 处理导出数据
function handleExport() {
  //message.info('正在准备导出数据...');
  // 调用实际的exportExcel方法进行数据导出
  try {
    // 深拷贝参数，避免直接修改原数据
    const exportParams = { ...params.value };
    
    // 与loadDataTable函数相同的参数处理逻辑
    // 特殊处理日期范围参数
    if (exportParams.time && Array.isArray(exportParams.time) && exportParams.time.length === 2) {
      // 提取开始日期和结束日期
      const [startDate, endDate] = exportParams.time;
      
      // 确保只使用日期部分
      if (startDate && endDate) {
        // 转换为日期对象确保只包含日期部分
        const startDateObj = new Date(startDate);
        const originalStartHours = startDateObj.getHours();
        startDateObj.setHours(0, 0, 0, 0);
        
        const endDateObj = new Date(endDate);
        const originalEndHours = endDateObj.getHours();
        endDateObj.setHours(0, 0, 0, 0);
        // 转换为时间戳格式
        exportParams.startTime = startDateObj.getTime();
        exportParams.endTime = endDateObj.getTime();
      } else {
        console.log('[handleExport] 日期范围不完整，跳过设置时间参数');
      }
      
      // 移除原始的time字段
      delete exportParams.time;
    } else {
      console.log('[handleExport] 没有检测到有效的日期范围参数:', exportParams.time);
    }
    
    // 使用处理后的参数调用导出接口
    exportExcel(exportParams).then((response) => {
      // 从响应头获取文件名
      let contentDisposition = '';
      // 灵活处理响应头，兼容不同格式
      if (response.headers && typeof response.headers.get === 'function') {
        contentDisposition = response.headers.get('content-disposition') || '';
      } else if (response.headers) {
        // 尝试以普通对象方式访问响应头
        contentDisposition = response.headers['content-disposition'] || 
                            response.headers['Content-Disposition'] || '';
      }
      
      let filename = '称重数据.xlsx'; // 默认文件名
      
      if (contentDisposition) {
        // 尝试从响应头中提取文件名
        const filenameRegex = /filename[^;=]*=((['"]).*?\2|[^;]*)/;
        const matches = filenameRegex.exec(contentDisposition);
        if (matches != null && matches[1]) {
          filename = matches[1].replace(/['"]/g, '');
          // 解码URL编码的文件名
          filename = decodeURIComponent(filename);
        }
      }
      
      // 创建Blob对象，确保使用正确的数据字段
      const blobData = response.data || response;
      const blob = new Blob([blobData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
      // 创建临时URL
      const url = window.URL.createObjectURL(blob);
      
      console.log('[handleExport] 准备下载文件:', { filename, blobSize: blob.size, url: 'blob: URL' });
      
      try {
        // 直接创建a标签并触发下载，不通过downloadByUrl函数以避免跨域处理逻辑中的问题
        const link = document.createElement('a');
        link.href = url;
        link.download = filename; // 设置下载文件名
        
        // 确保a标签在DOM中但不可见
        link.style.display = 'none';
        document.body.appendChild(link);
        
        // 触发点击事件
        link.click();
        
        console.log('[handleExport] 文件下载已触发:', filename);
        message.success('数据导出成功');
        
        // 移除a标签
        document.body.removeChild(link);
      } catch (downloadError) {
        console.error('[handleExport] 下载文件失败:', downloadError);
        message.error('文件下载失败，请稍后重试');
      } finally {
        // 延迟释放URL对象，确保下载完成
        setTimeout(() => {
          window.URL.revokeObjectURL(url);
          console.log('[handleExport] 临时URL已释放');
        }, 1000);
      }
    }).catch((error) => {
      console.error('导出数据失败:', error);
      message.error('导出数据失败，请稍后重试');
    });
  } catch (error) {
    console.error('导出数据失败:', error);
    message.error('导出数据失败，请稍后重试');
  }
}


// 组件挂载后加载数据
onMounted(async () => {
  try {
    // 同时请求两种数据
    const [goodsTypeArray, weightNumberArray] = await Promise.all([getGoodsType(), getWeightNumber()]);
    
    // 创建新的schemas数组以确保响应式更新
    const newSchemas = [...schemas.value];
    
    // 处理货物类型数据
    if (Array.isArray(goodsTypeArray) && goodsTypeArray.length > 0) {
      const goodsTypeOptions = goodsTypeArray.map(item => ({
        label: item.name,
        value: item.id,
      }));
      
      const goodsTypeIndex = newSchemas.findIndex(s => s.field === 'goodsType');
      if (goodsTypeIndex !== -1) {
        newSchemas[goodsTypeIndex] = {
          ...newSchemas[goodsTypeIndex],
          componentProps: {
            ...newSchemas[goodsTypeIndex].componentProps,
            options: goodsTypeOptions
          }
        };
      }
    } else {
      message.warning('暂无货物类型数据');
    }
    
    // 处理地磅编号数据
    if (Array.isArray(weightNumberArray) && weightNumberArray.length > 0) {
      const weightNumberOptions = weightNumberArray.map(item => ({
        label: item.number,
        value: item.id,
      }));
      
      const weightNumberIndex = newSchemas.findIndex(s => s.field === 'weightNumber');
      if (weightNumberIndex !== -1) {
        newSchemas[weightNumberIndex] = {
          ...newSchemas[weightNumberIndex],
          componentProps: {
            ...newSchemas[weightNumberIndex].componentProps,
            options: weightNumberOptions
          }
        };
      }
    } else {
      message.warning('暂无地磅类型数据');
    }
    
    // 一次性更新整个表单配置
    setProps({ schemas: newSchemas });
    
    // 设置默认的时间范围值为当天
    setTimeout(() => {
      setFieldsValue({
        time: getTodayRange()
      });
      // 初始化时自动加载数据
      reloadTable();
    }, 100);
  } catch (error) {
    console.error('加载下拉框数据异常:', error);
    message.error('加载下拉框数据失败，请稍后重试');
  }
});


</script>

<style lang="less" scoped>
.n-form {
  :deep(.n-grid){
    display: flex !important;
    & > div{
      width: 180px;
    }
    & > div:nth-child(1){
      width: 340px;
    }
    & > div:nth-child(2){
      width: 200px;
    }
    & > div:nth-child(4){
      width: 200px;
    }
  }
}
/* 自定义样式将查询按钮向左移动 */
:deep(.n-space) {
  justify-content: flex-start !important;
}

/* 自定义样式将导出按钮定位到与重置按钮相邻的位置 */
.export-btn-container {
  margin-top: -58px; /* 调整这个值以匹配实际按钮高度和间距 */
  margin-left: 95.5%; /* 调整这个值以定位到重置按钮旁边 */
}
</style>
